<template>
  <view class="public-content">
    <!-- 第一步 -->
    <view
      v-if="stepIndex === 0"
      style="width: 100%">
      <top-nav-bar background-color="transparent" />
      <view class="public-box">
        <view class="form-title">
          {{ $t(isEnterprise ? 'apply.title3' : 'apply.title1') }}
          <br />
          {{ $t('apply.title2') }}
        </view>
        <view class="det">
          {{ $t('apply.det') }}
        </view>
        <cb-input
          v-model="formData.loansAmount"
          :isSlot="true"
          type="number"
          :title="$t('apply.money')"
          :placeholder="$t('apply.money.placeholder')">
          {{ $t('apply.money.title') }}
        </cb-input>
        <view v-if="formData.loansAmount > 0" class="money-box">{{ formatKoreanWon(formData.loansAmount) }}</view>
        <view class="public-btn">
          <view class="btn-box">
            <button
              type="primary"
              class="bottom-btn"
              @click="onNext(1)">
              {{ $t('next') }}
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 第二步 -->
    <view
      v-if="stepIndex === 1"
      style="width: 100%">
      <uni-nav-bar
        fixed
        :border="false"
        background-color="transparent"
        left-icon="left"
        :leftText="$t('button.back')"
        leftWidth="160rpx"
        height="120rpx"
        @clickLeft="stepIndex = 0"></uni-nav-bar>
      <view class="public-box">
        <view class="top-checkbox">
          <checkbox-group @change="onAllChange">
            <label>
              <checkbox :checked="checkAll" />
              {{ $t('choice.title') }}
            </label>
          </checkbox-group>
        </view>
        <view
          v-for="item in choiceList"
          :key="item.value"
          class="label-checkbox">
          <label>
            <checkbox-group @change="checkboxChange(item)">
              <view>
                <checkbox
                  :value="item.value"
                  :checked="item.checked" />
              </view>
            </checkbox-group>
          </label>
          <view
            class="label-text"
            @click="onDetails(item)"
            >{{ item.articleTitle }}</view
          >
        </view>
        <view style="width: 100%; height: 220rpx"></view>
        <view class="public-btn">
          <view class="btn-box">
            <button
              type="primary"
              class="bottom-btn"
              @click="onNext(2)">
              {{ $t('next') }}
            </button>
          </view>
        </view>
      </view>
    </view>
    <!-- 第三步 -->
    <view
      v-if="stepIndex === 2"
      style="width: 100%">
      <uni-nav-bar
        fixed
        :border="false"
        background-color="transparent"
        left-icon="left"
        :leftText="$t('button.back')"
        leftWidth="160rpx"
        height="120rpx"
        @clickLeft="stepIndex = 1"></uni-nav-bar>
      <view class="public-box finally-box">
        <view class="finally-title">{{
          $t(isEnterprise ? 'enterprise.title' : 'apply.finally.title')
        }}</view>
        <cb-input
          v-model="formData.userName"
          :title="$t(isEnterprise ? 'enterprise.name' : 'apply.name')"
          :placeholder="$t(isEnterprise ? 'enterprise.name.comment' : 'apply.name.placeholder')" />
        <cb-input
          v-model="formData.idCardNumber"
          :title="$t('bank.name.24')"
          :placeholder="$t('bank.name.24')"
          type="idCard" />
        <cb-input
          v-model="formData.applicationNo"
          :title="$t('apply.telecom')"
          type="communication"
          :placeholder="$t('apply.telecom.placeholder')"
          @change="(e) => (formData.applicationNo = e)" />
        <cb-input
          v-model="formData.phoneNumber"
          :title="$t(isEnterprise ? 'enterprise.phone' : 'apply.phone')"
          type="number"
          :placeholder="
            $t(isEnterprise ? 'enterprise.phone.comment' : 'apply.phone.placeholder')
          " />
        <view class="public-btn">
          <view class="btn-box">
            <button
              type="primary"
              class="bottom-btn"
              @click="onNext(3)">
              {{ $t('next') }}
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 第四步 -->
    <view
      v-if="stepIndex === 3"
      style="width: 100%">
      <uni-nav-bar
        fixed
        :border="false"
        background-color="transparent"
        left-icon="left"
        :leftText="$t('button.back')"
        leftWidth="160rpx"
        height="120rpx"
        @clickLeft="stepIndex = 2"></uni-nav-bar>
      <view class="public-box finally-box">
        <filePicker
          v-model="formData.idCardFront"
          type="idCard"
          :title="$t(isEnterprise ? 'enterprise.id.title' : 'bank.name.17')"
          :textState="isEnterprise ? '5' : '0'" />

        <view class="public-btn">
          <view class="btn-box">
            <button
              type="primary"
              class="bottom-btn"
              @click="onNext(4)">
              {{ $t('next') }}
            </button>
          </view>
        </view>
      </view>
    </view>
    <!-- 第五步 -->
    <view
      v-if="stepIndex === 4"
      style="width: 100%">
      <uni-nav-bar
        fixed
        :border="false"
        background-color="transparent"
        left-icon="left"
        :leftText="$t('button.back')"
        leftWidth="160rpx"
        height="120rpx"
        @clickLeft="stepIndex = 3"></uni-nav-bar>
      <view class="public-box finally-box">
        <filePicker
          v-model="formData.residencePermit"
          type="idCard"
          :title="$t(isEnterprise ? 'enterprise.id.title2' : 'bank.name.19')"
          textState="1" />

        <view class="public-btn">
          <view class="btn-box">
            <button
              type="primary"
              class="bottom-btn"
              @click="onNext(5)">
              {{ $t('next') }}
            </button>
          </view>
        </view>
      </view>
    </view>
    <!-- 第六步 -->
    <view
      v-if="stepIndex === 5"
      style="width: 100%">
      <uni-nav-bar
        fixed
        :border="false"
        background-color="transparent"
        left-icon="left"
        :leftText="$t('button.back')"
        leftWidth="160rpx"
        height="120rpx"
        @clickLeft="stepIndex = 4"></uni-nav-bar>
      <view
        v-if="isEnterprise"
        class="public-box">
        <view class="finally-title">{{ $t('apply.finally.title7') }}</view>
        <!-- 企业信息输入框 -->
        <cb-input
          v-model="formData.companyName"
          :title="$t('enterprise.name2')"
          :placeholder="$t('enterprise.name2.comment')" />
        <cb-input
          v-model="formData.addressNow"
          :title="$t('enterprise.address')"
          :placeholder="$t('enterprise.address.comment')" />
        <cb-input
          v-model="formData.enterprisePhone"
          :title="$t('enterprise.phone2')"
          type="number"
          :placeholder="$t('enterprise.phone2.comment')" />
        <cb-input
          v-model="formData.enterpriseType"
          :title="$t('enterprise.type')"
          type="entType"
          :placeholder="$t('enterprise.type.comment')"
          @change="(e) => (formData.enterpriseType = e)" />

        <cb-input
          v-model="formData.annualRevenue"
          :isSlot="true"
          :title="$t('enterprise.income')"
          type="number"
          :placeholder="$t('enterprise.income.comment')">
          만원
        </cb-input>

        <cb-input
          v-model="formData.annualTax"
          :isSlot="true"
          :title="$t('enterprise.tax')"
          type="number"
          :placeholder="$t('enterprise.tax.comment')">
          만원
        </cb-input>

        <cb-input
          v-model="formData.businessLicenseNo"
          :title="$t('enterprise.id.title5')"
          :placeholder="$t('enterprise.id.title5.comment')" />
      </view>
      <view
        v-else
        class="public-box">
        <view class="finally-title">{{
          $t(isEnterprise ? 'enterprise.title' : 'apply.finally.title6')
        }}</view>
        <cb-input
          v-model="formData.housingType"
          :title="$t('apply.house.type')"
          type="housingType"
          :placeholder="$t('apply.house.type.placeholder')"
          @change="(e) => (formData.housingType = e)" />

        <cb-input
          v-model="formData.addressNow"
          :title="$t(isEnterprise ? 'enterprise.address' : 'apply.region')"
          :placeholder="
            $t(isEnterprise ? 'enterprise.address.comment' : 'apply.region.placeholder')
          " />
        <cb-input
          v-model="formData.occupation"
          :title="$t('apply.occupation')"
          type="occupation"
          :placeholder="$t('apply.occupation.placeholder')"
          @change="(e) => (formData.occupation = e)" />

        <cb-input
          v-model="formData.monthlySalary"
          :isSlot="true"
          :title="$t('apply.salary')"
          :placeholder="$t('apply.salary.placeholder')"
          type="number">
          만원
        </cb-input>

        <cb-input
          v-model="formData.maritalStatus"
          :title="$t('apply.marriage')"
          type="marriage"
          :placeholder="$t('apply.marriage.placeholder')"
          @change="(e) => (formData.maritalStatus = e)" />
        <cb-input
          v-model="formData.emergencyContactName"
          :title="$t('apply.emergency.name')"
          :placeholder="$t('apply.emergency.name.placeholder')" />
        <cb-input
          v-model="formData.emergencyContactPhone"
          :title="$t('apply.emergency.phone')"
          :placeholder="$t('apply.emergency.phone.placeholder')" />
      </view>
      <view
        ew
        class="public-btn">
        <view class="btn-box">
          <button
            type="primary"
            class="bottom-btn"
            @click="onNext(6)">
            {{ $t('next') }}
          </button>
        </view>
      </view>
    </view>

    <!-- 第七步 -->
    <view
      v-if="stepIndex === 6"
      style="width: 100%">
      <uni-nav-bar
        fixed
        :border="false"
        background-color="transparent"
        left-icon="left"
        :leftText="$t('button.back')"
        leftWidth="160rpx"
        height="120rpx"
        @clickLeft="stepIndex = 5"></uni-nav-bar>
      <view
        v-if="isEnterprise"
        class="public-box finally-box">
        <filePicker
          v-if="isEnterprise"
          v-model="formData.businessLicense"
          type="idCard"
          :title="$t('enterprise.id.title4')"
          textState="2" />

        <view class="public-btn">
          <view class="btn-box">
            <button
              type="primary"
              class="bottom-btn"
              @click="onNext(7)">
              {{ $t('next') }}
            </button>
          </view>
        </view>
      </view>
      <view
        v-else
        class="public-box finally-box">
        <view class="finally-title">{{ $t('apply.finally.title2') }}</view>

        <cb-input
          v-model="formData.isOtherLoans"
          :title="$t('apply.loan')"
          type="switch"
          :placeholder="$t('apply.loan.placeholder')"
          @change="(e) => (formData.isOtherLoans = e)" />
        <cb-input
          v-model="formData.isFourInsurance"
          :title="$t('apply.insurance')"
          type="switch"
          :placeholder="$t('apply.insurance.placeholder')"
          @change="(e) => (formData.isFourInsurance = e)" />
        <!--
                  <cb-input v-model="formData.loanTerm" :title="$t('apply.term')" type="deadline"
                  :placeholder="$t('apply.term.placeholder')" @change="(e) => (formData.loanTerm = e)" /> -->

        <cb-input
          v-model="formData.loansUseId"
          type="funds"
          :title="$t('apply.purpose')"
          :placeholder="$t('apply.purpose.placeholder')"
          @change="(e) => (formData.loansUseId = e)" />
        <cb-input
          v-model="formData.repaymentType"
          :title="$t('apply.repayment')"
          type="repaymentClass"
          :placeholder="$t('apply.repayment.placeholder')"
          @change="(e) => (formData.repaymentType = e)" />

        <view class="public-btn">
          <view class="btn-box">
            <button
              type="primary"
              class="bottom-btn"
              @click="onSubmit(userDetails, isEnterprise)">
              {{ $t('apply.submit') }}
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 第八步 - 企业贷款使用 -->
    <view
      v-if="stepIndex === 7"
      style="width: 100%">
      <uni-nav-bar
        fixed
        :border="false"
        background-color="transparent"
        left-icon="left"
        :leftText="$t('button.back')"
        leftWidth="160rpx"
        height="120rpx"
        @clickLeft="stepIndex = 6"></uni-nav-bar>
      <view class="public-box finally-box">
        <view class="finally-title">{{ $t('apply.finally.title2') }}</view>

        <!-- <cb-input v-model="formData.loanTerm" :title="$t('apply.term')" type="deadline"
                  :placeholder="$t('apply.term.placeholder')" @change="(e) => (formData.loanTerm = e)" /> -->

        <cb-input
          v-model="formData.loansUseId"
          type="purpose"
          :title="$t('apply.purpose')"
          :placeholder="$t('apply.purpose.placeholder')"
          @change="(e) => (formData.loansUseId = e)" />
        <cb-input
          v-model="formData.repaymentType"
          :title="$t('apply.repayment')"
          type="repaymentClass"
          :placeholder="$t('apply.repayment.placeholder')"
          @change="(e) => (formData.repaymentType = e)" />

        <cb-input
          v-model="formData.emergencyContactName"
          :title="$t('apply.emergency.name')"
          :placeholder="$t('apply.emergency.name.placeholder')" />
        <cb-input
          v-model="formData.emergencyContactPhone"
          :title="$t('apply.emergency.phone')"
          :placeholder="$t('apply.emergency.phone.placeholder')" />

        <view class="public-btn">
          <view class="btn-box">
            <button
              type="primary"
              class="bottom-btn"
              @click="onSubmit(userDetails, isEnterprise)">
              {{ $t('apply.submit') }}
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { getApplyInfo, getArticle, getApplyEnterprise } from '@/api'
  import { ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import filePicker from '@/components/file-picker.vue'
  import { useForm } from './useForm'
  import { useValidations } from '@/hooks/useValidations'
import { useUser } from '@/hooks/useUser'

  const { validate50W } = useValidations()
  const { formatKoreanWon } = useUser()

  const {
    formData,
    onSubmit,
    threeValidate,
    fourValidate,
    fiveValidate,
    sixValidate,
    sevenValidate,
    eightValidate
  } = useForm()

  const { t } = useI18n()

  /** 当前用户流程详情 */
  const userDetails = ref(null)

  /** 步骤数 */
  const stepIndex = ref(0)
  /** 全选 */
  const checkAll = ref(false)
  const choiceList = ref([])

  /** 第二步，详情弹框 */
  const onDetails = (item) => {
    uni.navigateTo({
      url: `/pages/details-index/details-index?articleId=${item.articleId}`
    })
  }

  /** 下一步 */
  const onNext = async (index) => {
    validate50W(formData.loansAmount)
    if (index === 1 && validate50W(formData.loansAmount)) return

    if (index === 1) {
      const res = await getArticle(
        isEnterprise.value ? 'Use_Regulations_Company' : 'Use_Regulations'
      )
      choiceList.value = res.map((v, i) => {
        return {
          ...v,
          value: i + 1 + '',
          checked: false
        }
      })
    }

    if (index === 2 && formData.choice.length !== choiceList.value.length) {
      uni.showToast({
        title: t('apply.protocol.error'),
        icon: 'none'
      })
      return
    }
    if (index === 3 && threeValidate(formData, isEnterprise.value)) return
    if (index === 4 && fourValidate(formData, isEnterprise.value)) return
    // if (index === 5 && fiveValidate(formData, isEnterprise.value)) return
    if (index === 6 && sixValidate(formData, isEnterprise.value)) return
    if (index === 7 && sevenValidate(formData, isEnterprise.value)) return
    if (index === 8 && eightValidate(formData, isEnterprise.value)) return

    stepIndex.value = index == 4 ? 5 : index
  }

  const onAllChange = () => {
    checkAll.value = !checkAll.value
    choiceList.value.forEach((item) => {
      item.checked = checkAll.value
    })
    formData.choice = choiceList.value.filter((v) => v.checked).map((v) => v.value)
  }

  const checkboxChange = (item) => {
    item.checked = !item.checked
    formData.choice = choiceList.value.filter((v) => v.checked).map((v) => v.value)
  }

  /** 是否是企业贷款 */
  const isEnterprise = ref(false)
  onLoad(async (e) => {
    // e.type === 'enterprise' 为企业申请
    const isShow = e.type === 'enterprise'
    isEnterprise.value = isShow
    const res = isShow ? await getApplyEnterprise() : await getApplyInfo()
    // formData
    userDetails.value = res
    if (res.status === 4) {
      if (isShow) {
        formData.loansAmount = res.loanAmount
        formData.userName = res.legalName
        formData.phoneNumber = res.legalPhone
        formData.addressNow = res.enterpriseAddress
        formData.companyName = res.enterpriseName
        formData.enterprisePhone = res.enterprisePhone
        formData.annualRevenue = res.annualRevenue
        formData.annualTax = res.annualTax
        formData.enterpriseType = res.enterpriseType
        formData.loansUseId = res.loansUseId
        formData.loanTerm = res.loanTerm
        formData.repaymentType = res.repaymentType == 3 ? 2 : res.repaymentType
        formData.businessLicenseNo = res.businessLicenseNo
        formData.idCardNumber = res.residentId
        formData.businessLicense = res.bankStatementImage
        formData.idCardFront = res.idCardFrontImage
        // formData.residencePermit = res.residencePermitPhoto
        formData.applicationNo = res.applicationNo
        formData.emergencyContactName = res.emergencyContactName
        formData.emergencyContactPhone = res.emergencyContactPhone
      } else {
        formData.loansAmount = res.loansAmount
        formData.userName = res.userName
        formData.phoneNumber = res.phoneNumber
        formData.addressNow = res.addressNow
        formData.isOtherLoans = res.isOtherLoans
        formData.isFourInsurance = res.isFourInsurance
        formData.monthlySalary = res.monthlySalary
        formData.loansUseId = res.loansUseId
        formData.companyName = res.companyName
        formData.idCardNumber = res.idCardNumber
        formData.occupation = res.occupation
        formData.annualIncomeAfterTax = res.annualIncomeAfterTax
        formData.maritalStatus = res.maritalStatus == 3 ? 4 : res.maritalStatus
        formData.idCardFront = res.idCardFrontImage
        // formData.residencePermit = res.residencePermitPhoto
        formData.emergencyContactName = res.emergencyContactName
        formData.emergencyContactPhone = res.emergencyContactPhone
        formData.housingType = res.housingType
        formData.loanTerm = res.loanTerm
        formData.repaymentType = res.repaymentType == 3 ? 2 : res.repaymentType
        formData.applicationNo = res.applicationNo
      }
    }
  })
</script>

<style lang="scss" scoped>
  .public-content {
    background: url('/static/bg/put.png') no-repeat top center;
    background-size: 100%;
    height: 100vh;
  }

  //     background: url('/static/bg/put.png') no-repeat top center;
  // background-size: 100%;
  .form-title {
    font-weight: 700;
    font-size: 46rpx;
    line-height: 74rpx;
    letter-spacing: -2rpx;
    color: #1d2024;
  }

  .det {
    font-weight: 400;
    font-size: 24rpx;
    line-height: 54rpx;
    letter-spacing: -2rpx;
    color: #3282f0;
    margin-bottom: 44rpx;
  }

  .label-checkbox {
    display: flex;
    align-items: center;
    height: 76rpx;
    // margin-bottom: 100rpx;

    .label-text {
      font-size: 26rpx;
      color: #606060;
      letter-spacing: -3rpx;
      margin-left: 10rpx;
    }
  }

  .top-checkbox {
    .uni-label-pointer {
      font-size: 26rpx;
      color: #1d2024;
      font-weight: 700;
      padding-bottom: 20rpx;
      margin-bottom: 20rpx;
      border-bottom: solid 1px #dee2e5;
      display: flex;
      align-items: center;

      .uni-checkbox-wrapper {
        margin-right: 10rpx;
      }
    }
  }

  .finally-title {
    margin: 20rpx 0 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 40rpx;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .finally-box {
    // margin-bottom: 300rpx;
    padding-bottom: 200rpx;

    :deep(.cb-input),
    :deep(.cb-selection) {
      margin-top: 10rpx !important;
    }
  }

  .bottom-btn {
    height: 100rpx;
    line-height: 100rpx;
    background: #3462fe;
    border-radius: 64rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .top-box {
    display: flex;
    justify-content: space-between;
  }

  .money-box {
    margin-top: 14rpx;
    font-size: 32rpx;
    font-weight: 700;
    text-align: right;
    padding-right: 50rpx;
  }
</style>
